<template>
  <div>
    <header class="header">
      <el-button @click="$router.push('/teacher/dashboard')" icon="left" type="text" class="back-button">
        <img src="@/assets/svgs/left.svg" alt="Back" />
      </el-button>
      <span class="title">AIGC智能作业</span>
      <div class="header-right">
        <el-button @click="$router.push('/teacher/assignment/assign_homework')" type="text" class="assign-button">布置作业</el-button>
      </div>
    </header>
    <div class="homework-card-list">
      <div 
        v-for="homework in homeworks" 
        :key="homework.id" 
        class="homework-card"
        @click="handleCardClick(homework.id)"
        style="cursor: pointer"
      >
        <div>
          <div class="homework-title">{{ homework.title }}</div>
          <div class="homework-status">状态：{{ homework.status }}</div>
          <div class="homework-dates">
            <div>发布时间：{{ formatDate(homework.publishTime) }} 截止时间：{{ formatDate(homework.dueTime) }}</div>
          </div>
        </div>
        <div class="homework-submission">
          <div class="submission-count">
            <div class="submission-number">{{ homework.submittedCount }}/{{ homework.totalCount }}</div>
            <div class="submission-label">提交人数</div>
          </div>
          <div class="submission-score">
            <div class="score-number">{{ homework.score }}</div>
            <div class="score-label">分数</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const homeworkId = route.params.id;

const handleCardClick = () => {
  router.push('/teacher/assignment/see_homework');
};

</script>

<script>
export default {
  data() {
    return {
      homeworks: [
        // 示例数据
        {
          id: 1,
          title: '数学作业',
          status: '提交中',
          publishTime: new Date(),
          dueTime: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), // 1天后截止
          submittedCount: 5,
          totalCount: 30,
          score: 100
        },
        {
          id: 2,
          title: '数学作业',
          status: '提交中',
          publishTime: new Date(),
          dueTime: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), // 1天后截止
          submittedCount: 5,
          totalCount: 30,
          score: 100
        },
        {
          id: 3,
          title: '数学作业',
          status: '提交中',
          publishTime: new Date(),
          dueTime: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), // 1天后截止
          submittedCount: 5,
          totalCount: 30,
          score: 100
        },
        {
          id: 4,
          title: '数学作业',
          status: '提交中',
          publishTime: new Date(),
          dueTime: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), // 1天后截止
          submittedCount: 5,
          totalCount: 30,
          score: 100
        },
        // 可以添加更多作业
      ]
    };
  },
  methods: {
    formatDate(date) {
      const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
      return new Intl.DateTimeFormat('zh-CN', options).format(date);
    }
  }
};
</script>

<style scoped>
.header {
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  background-color: #13227a;
  justify-content: space-between; /* 使内容两端对齐 */
}

.back-button {
  color: white;
  border: none;
  width: 25px;
  height: 25px;
}

.title {
  margin-left: 10px; /* 添加左边距 */
}

.header-right {
  display: flex; /* 使右侧内容为flex布局 */
}

.assign-button {
  background-color: #13227a;
  border: 1px solid white;
  color: white;
  width: 120px;
  height: 40px;
}

.homework-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制三列布局 */
  gap: 20px; /* 统一的间距 */
  padding: 0 40px;
  margin-top: 20px;
}

.homework-card {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  height: 220px;
  /* 删除width和flex相关属性，由grid控制宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.homework-title {
  font-weight: bold;
  color: black;
  font-size: 20px;
}

.homework-status {
  color: gray;
  font-size: 14px;
  margin-top: 20px;
}

.homework-dates {
  color: gray;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
}

.homework-submission {
  color: darkgray;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-top: 40px; /* 增加距离 */
}

.submission-count, .submission-score {
  text-align: center;
  margin-right: 15px;
}

.submission-number, .score-number {
  font-size: 32px; /* 增大数字部分的大小 */
  color: darkgray;
}

.submission-label, .score-label {
  font-size: 14px; 
  color: darkgray;
}
</style>
